<template>
    <div>
        <div style="margin-bottom: 5px;">
            <el-input v-model="name" style="width: 200px;" placeholder="请输入名字" suffix-icon="el-icon-search"
                      @keyup.entry.native="loadPost"
            ></el-input>
<!--            <el-select v-model="roleId" filterable placeholder="请选择角色" style="margin-left: 5px;">-->
<!--                <el-option-->
<!--                        v-for="item in roleIds"-->
<!--                        :key="item .value"-->
<!--                        :label="item.label"-->
<!--                        :value="item.value"-->


<!--                >-->


<!--                </el-option>-->
<!--            </el-select>-->
            <el-button style="margin-left: 5px;" type="primary" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetparam">重置</el-button>
            <el-button style="margin-left: 5px;" type="primary" @click="add">新增</el-button>
        </div>

        <el-table :data="tableData"
                  :header-cell-style="{background: '#f2f5fc', color: '#555'}"
                  border

        >
            <el-table-column prop="id" label="ID" width="60">
            </el-table-column>
            <el-table-column prop="no" label="账号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="phone" label="电话" width="180">
            </el-table-column>
            <el-table-column prop="roleId" label="角色" width="180">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'primary' : 'success')"
                            disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ? '管理员' :
                        '餐馆账号')}}
                    </el-tag>
                </template>

            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-popconfirm
                            title="确定删除吗?"
                            @confirm="del(scope.row.id)"
                            style="margin-left: 5px"
                    >

                        <el-button slot="reference" size="small" type="danger">删除</el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2,4,8,16]"
                :page-size="pageSize"
                layout="total,sizes,prev,pager,next,jumper"
                :total="total"
        >


        </el-pagination>
        <el-dialog
                title="添加信息"
                :visible.sync="centerDialogVisible"
                width="30%"
                center
        >


            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="账号" prop="no">
                    <el-col :span="14">
                        <el-input v-model="form.no"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-col :span="14">
                        <el-input v-model="form.name"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-col :span="14">
                        <el-input v-model="form.password"></el-input>

                    </el-col>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-col :span="14">
                        <el-input v-model="form.phone"></el-input>

                    </el-col>
                </el-form-item>
<!--                <el-form-item label="角色">-->
<!--                    <el-select v-model="form.roleId" placeholder="请选择活动区域">-->
<!--                        <el-option label="超级管理员" value="0"></el-option>-->
<!--                        <el-option label="管理员" value="1"></el-option>-->
<!--                        <el-option label="餐馆账号" value="2"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible=false">取消</el-button>
                        <el-button type="primary" @click="save">确定</el-button>


                    </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "AdminMange",
        data() {

            let checkDuplicate = (rule, value, callback) => {
                if (this.form.id) {
                    return callback();
                }
                this.$axios.get(this.$httpUrl + "/suser/findByNo?no=" + this.form.no).then(res => res.data).then(res => {
                    if (res.code != 200) {
                        callback();
                    } else {
                        callback(new Error('账号已经存在'));
                    }
                })
            };
            return {
                tableData: [],
                pageSize: 4,
                pageNum: 1,
                total: 0,
                name: '',
                roleId: '1',
                roleIds: [
                    {
                        value: 0,
                        label: '超级管理员'
                    }, {
                        value: 1,
                        label: '管理员'

                    }, {
                        value: 2,
                        label: '餐馆账户'
                    }
                ],
                centerDialogVisible: false,
                form: {
                    id: '',
                    no: '',
                    name: '',
                    password: '',
                    phone: '',
                    roleId: '1'

                },
                rules: {
                    no: [
                        {
                            required: true, message: '请输入账号 ', trigger: 'blur'
                        },
                        {min: 4, max: 9, message: '长度在4到9之间', trigger: 'blur'},
                        {validator: checkDuplicate, trigger: 'blur'}
                    ], name: [{
                        required: true, message: '请输入姓名', trigger: 'blur'
                    }],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 4, max: 9, message: '长度在4到9之间', trigger: 'blur'}
                    ],
                    phone: [{required: true, message: '手机号不能为空', trigger: 'blur'},
                        {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur'
                        }
                    ]
                }
            }
        }, methods: {
            resetForm() {
                this.$refs.form.resetFields();
            },
            mod(row) {
                //赋值到表单

                this.centerDialogVisible = true;
                this.$nextTick(() => {
                    // this.resetForm();
                    this.form.id = row.id;
                    this.form.no = row.no;
                    this.form.name = row.name;
                    this.form.password = row.password;
                    this.form.phone = row.phone;
                    this.form.roleId = '1';
                })
            },
            del(id) {
                this.$axios.get(this.$httpUrl + '/suser/del?id=' + id
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功!',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                        this.resetForm()

                    } else {
                        this.$message({
                            message: '添加失败!',
                            type: 'error'
                        });
                    }
                })
            },


            add() {

                this.centerDialogVisible = true;
                this.$nextTick(() => {
                    this.resetForm();
                })

            }
            ,
            doSave() {
                this.$axios.post(this.$httpUrl + '/suser/save', this.form
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.$message({
                            message: '添加成功!',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                        this.resetForm()

                    } else {
                        this.$message({
                            message: '添加失败!',
                            type: 'error'
                        });
                    }
                })
            },
            doMod() {
                this.$axios.post(this.$httpUrl + '/suser/update', this.form
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.$message({
                            message: '修改成功!',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                        this.resetForm()

                    } else {
                        this.$message({
                            message: '添加失败!',
                            type: 'error'
                        });
                    }
                })
            },
            save() {
                this.$refs.form.validate((vaild) => {
                    if (vaild) {
                        if (this.form.id) {
                            this.doMod();
                        } else {
                            this.doSave();
                        }
                    } else {
                        console.log('submit err!')
                        return false;
                    }
                });


            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum=1;
                this.pageSize = val;
                this.loadPost();
            }
            ,
            handleCurrentChange(val) {
                console.log(`当前页:${val}`);
                this.pageNum = val;
                this.loadPost();
            }
            ,
            loadGet() {//获取数据的请求
                this.$axios.get(this.$httpUrl + '/suser/list').then(res => res.data).then(res => {
                    console.log(res)
                    this.tableData = res
                })
            },
            resetparam() {

                this.name = ''
                this.roleId = ''
            }


            ,
            loadPost() {//获取数据的请求
                this.$axios.post(this.$httpUrl + '/suser/listpagecc1', {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum,
                        param: {
                            name: this.name,
                            roleId: '1'
                        }

                    }
                ).then(res => res.data).then(res => {
                    console.log(res)
                    /*       // console.log('你好!')
                           // console.log(res)*/
                    if (res.code == 200) {
                        this.tableData = res.data
                        this.total = res.total

                    } else {
                        alert('获取数据失败!')
                    }
                })
            }
        },
        beforeMount() {
            //this.loadGet();//启动页面获取数据信息方法
            this.loadPost();//将得到的数据打包发送给


        }
    }
</script>

<style scoped>

</style>